<?xml version='1.0' encoding='utf-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>5_Diagram Layout management</title>
		<link type="text/css" rel="stylesheet" href="PLUGINS_ROOT/org.polarsys.capella.doc/html/styles.css"/>
	</head>
	<body>
		<h1 id="Layout_Management">Layout Management</h1>
		<h2 id="Diagram_Cloning">Diagram Cloning</h2>
		<p>In order to 
			<b>ease the alternative architectures set up</b>, a cloning diagram functionality exits in Capella. Directly in the 
			<i>Capella Project explorer</i>, right click on the diagram you want to clone and select 
			<b>'Clone Diagram</b>'. A new diagram is created next to the original one.
		</p>
		<p>
			<img border="0" src="../../Images/Tips6.png"/>
		</p>
		<h2 id="Diagram_Template">Diagram Template</h2>
		<p>A diagram template can be set up and then applied to others diagrams in order to save time in diagram layout set up. It also ensures the layout consistency of diagrams.</p>
		<p>Example:</p>
		<ul>
			<li>Step1: Create a new LAB from a scenario by clicking on the following accelerator:</li>
		</ul>
		<p>
			<img border="0" src="../../Images/5_2_Step1.png"/>
		</p>
		<ul>
			<li>Step2: On the Template diagram, select all and copy the template layout</li>
		</ul>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:502px;">
					<a href="../../Images/Tips13.png" class="image">
						<img class="thumbimage" width="500" border="0" src="../../Images/Tips13.png"/>
					</a>
				</div>
			</div>
		</p>
		<ul>
			<li>Step3: On the LAB, use "Paste Format (Semantic)" to paste the template layout and style. Use "Paste Layout (Semantic)" to paste the layout only.</li>
		</ul>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:502px;">
					<a href="../../Images/Tips15.png" class="image">
						<img class="thumbimage" width="500" border="0" src="../../Images/Tips15.png"/>
					</a>
				</div>
			</div>
		</p>
		<h2 id="Layout_mode">Layout mode</h2>
		<p>Once all your elements are placed on your diagram, you can activate the Layout Mode in order to displace them but their allocation on other elements could not be modified.</p>
		<p>
			<img border="0" src="../../Images/TT10.png"/>
		</p>
		<h2 id="Layout.2FStyle_Capella_Copy.2FPaste_.28semantic.29">Layout/Style Capella Copy/Paste (semantic)</h2>
		<p>You can Copy/Paste the layout and the style of elements to reuse them 
			<b>in another diagram containing the same Capella semantic elements</b>:
		</p>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:502px;">
					<a href="../../Images/TT9.png" class="image">
						<img class="thumbimage" width="500" border="0" src="../../Images/TT9.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>It is also possible to Paste only the layout or only the style of elements by right clicking on the diagram, selecting 
			<b>'Capella Copy/Paste</b>' and then 
			<b>'Paste with layout only</b>' or 
			<b>'Paste with style only</b>'
		</p>
		<p>
			<img border="0" src="../../Images/Tips7.png"/>
		</p>
		<p>You can also Copy the layout/style from an upper phase (e.g. System Analysis) and paste to different model elements to a lower phase (e.g Logical Architecture), thanks to the Paste capability which tries to match with realizing elements.</p>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:802px;">
					<a href="../../Images/Tips76.png" class="image">
						<img class="thumbimage" width="800" border="0" src="../../Images/Tips76.png"/>
					</a>
				</div>
			</div>
		</p>
		<h2 id="Copy.2FPaste_Layout_and_Style">Copy/Paste Layout and Style</h2>
		<p>Layout and style can also be copy-pasted using a different facility, which can be found in contextual menu "Edit" and in the toolbar at the top of the diagram editor</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_edit_menu.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_edit_menu.png"/>
					</a>
				</div>
			</div>

			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_2.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_2.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>2 selection modes exist for both copy and paste: Global copy, Selection copy, global paste, paste on selection</p>
		<p>
			<b>Global copy</b>
		</p>
		<p>Layout of all elements on a diagram can be copied at once, either right-clicking the diagram's background &gt; Edit &gt; Copy format, or clicking "Copy the format of the whole diagram"</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_3.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_3.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>
			<b>Copy based on selection</b>
		</p>
		<p>Format can be copied from a selection of elements, either right-clicking the selection &gt; Edit &gt; Copy format, or clicking "Copy the format of the selected diagram elements"</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_4.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_4.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>Format data is associated with the semantic element, so that when pasting, any matching element in the target selection will have its format modified to the copied format.</p>
		<p>
			<b>Global paste</b>
		</p>
		<p>Format (both Style and Layout) can be pasted directly on a diagram, either right-clicking the diagram's background &gt; Edit &gt; Paste format, or clicking "Paste the current recorded format (layout and style) to the selected diagram"</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_5.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_5.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>However, if a semantic element is displayed multiple times, the paste might not be accurate, and may cause these multiple occurrences to be overlapped. To overcome this issue, we recommend to use multiple copy/paste on a fragmented selection instead (See examples)</p>
		<p>Style or layout can also be pasted separately, using Edit &gt; Paste Style (semantic) , or Edit &gt; Paste Layout (semantic)</p>
		<p>
			<b>Paste on selection</b>
		</p>
		<p>Format can also be pasted on a selection of elements, either right-clicking the diagram's background &gt; Edit &gt; Paste format, or clicking "Paste the current recorded format (layout and style) to the selected elements"</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_6.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_6.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>As explained, a copy paste action may not properly work on a selection of elements that contains several times the same element.
			This may however be achieved by splitting your original copy paste action into multiple ones, so that the format of each occurrence is properly copy-pasted</p>
		<p>Accelerators exist to ease this process, such as Capella Select &gt; Related RPL elements, or Capella Select &gt; Related REC elements 
			They significantly help copy pasting between REC and RPLs, by copying the format of a REC and applying it to each RPL independently.</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/select_related_rec.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/select_related_rec.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/select_related_rpl.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/select_related_rpl.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>On top of the different types of selection, the Paste actions provides two coordinates modes : Absolute and Relative</p>
		<p>
			<div class="thumb">
				<div class="thumbinner">
					<a href="../../Images/copy_paste_layout_7.png" class="image">
						<img class="thumbimage" border="0" src="../../Images/copy_paste_layout_7.png"/>
					</a>
				</div>
			</div>
		</p>
		<p>
			<b>Absolute mode</b>
		</p>
		<p>When pasting, the matching elements' new coordinates will be the same as the source coordinates</p>
		<p>
			<b>Optimized locations by group (Relative)</b>
		</p>
		<p>When pasting, the matching elements' new coordinates will be calculated to be relative to the target group of parents
			This lets you paste format in elements that are contained in other</p>
		<h2 id="Straighten_to_top">Straighten to top</h2>
		<p>You can align connectors between two components by selecting them (right-to-left selection) and use the "Straighten" tool:</p>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:602px;">
					<a href="../../Images/Tips63.png" class="image">
						<img class="thumbimage" width="600" border="0" src="../../Images/Tips63.png"/>
					</a>
				</div>
			</div>
		</p>
		<h2 id="Layout_actions">Layout actions</h2>
		<p>There are 2 
			<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management">layout actions families</a> :
		</p>
		<ul>
			<li>"Layout All" "Layout Selection" and "Layout Children" to layout diagram nodes and node containers</li>
			<li>"Layout Connected Ports" to layout ports of diagram nodes</li>
		</ul>
		<p>
			<div class="thumb">
				<div class="thumbinner" style="width:602px;">
					<a href="../../Images/layout_actions_menus_nodeSelection.png" class="image">
						<img class="thumbimage" width="600" border="0" src="../../Images/layout_actions_menus_nodeSelection.png"/>
					</a>
				</div>
			</div>
		</p>
		<table border="1">
			<tr>
				<td>
					<p>
						<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
					</p>
				</td>
				<td>
					<p>
						<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Children" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Children">"Layout Children"</a> and 
						<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Connected_Ports" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Connected_Ports">"Layout Connected Ports"</a> are usefull actions to layout nodes and ports because they layout only children node/ports thus having the most controlled impact.
					</p>
				</td>
			</tr>
		</table>
		<table border="1">
			<tr>
				<td>
					<p>
						<img height="48" width="48" border="0" src="../../Images/InfoIcon.png"/>
					</p>
				</td>
				<td>
					<p>Remember the "Move Pinned Elements" button allow to ignore or take into account the Pin status.
						See 
						<a href="/wiki/../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management" title="../help/topic/org.polarsys.capella.ui.doc/html/05.%20Diagram%20Management/5.1.%20Diagram%20concepts.html#Layout_Management">Layout Management</a> 
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>